/**
 * 查看培训需求
 */
<template>
   <div class="p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
                <TrainingNeeds ref="trainingNeedsRef" :loading="loading" type="view"></TrainingNeeds>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程记录" en="Process Record"/></template>
                <ProcessHistory :processInsId="formData.processInsId"/>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程图" en="Process Chart"/></template>
                <ProcessView :processInsId="formData.processInsId"/>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="props.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <StatusBar
            :id="formData.id"
            :status="formData.zt"
            :isValid="formData.yxbs"
        />
    </div>
</template>

<script lang="ts" setup name="viewTrainingNeeds">
import { onMounted, ref, nextTick } from 'vue';
import request from '/@/utils/request';
import TrainingNeeds from './TrainingNeeds.vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import StatusBar from '/@/components/vp/status/StatusBar.vue';

const props= defineProps<{ 
    id: string,
}>();

const trainingNeedsRef = ref();
const loading = ref(false);

// 组件挂载后事件
onMounted(() => {
    loadForm();
})

const formData = ref({
    id:"",
    zt: null,
    yxbs: 1,
    processInsId: "",
});

// 加载数据
const loadForm = () => {
    loading.value = true;
    nextTick(() => {
        request.get(`/training/needs/${props.id}`).then((res)=>{
            trainingNeedsRef.value.setData({
                ...res.data
            });
            formData.value.processInsId = res.data.processInsId;
            formData.value.id = res.data.id;
            formData.value.zt = res.data.zt;
            formData.value.yxbs = 1;
            loading.value = false;
        })
    })
};

</script>
<style scoped lang="scss">

</style>
